<template>
  <mindmap v-model="data"
           class="mind"
           :zoom="true"
           :center-btn="true"
           :download-btn="true"
           :sharp-corner="true"
  ></mindmap>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import mindmap from 'vue3-mindmap';
import 'vue3-mindmap/dist/style.css';

const data = ref([
  {
    name: '如何学习D3',
    children: [
      {
        name: '预备知识',
        children: [
          { name: 'HTML & CSS' },
          { name: 'JavaScript' },
        ],
      },
      {
        name: '安装',
        children: [{ name: '折叠节点' }],
      },
    ],
  },
]);
</script>

<style>
.mind{
  height: 800px;
}
</style>
